<div class="form-object" [formGroup]="fg">
  <div class="form-container">

    <div class="form-edit-header">
      <input type="text" placeholder="请输入字段名" [(ngModel)]="fieldName" [ngModelOptions]="{standalone: true}">
      <label [ngxFor]="fieldNameRequire">是否必填</label>
      <input type="checkbox" #fieldNameRequire ngxId>
      <br>
      <button type="button" [disabled]="btnDisable" (click)="addField(fieldNameRequire.checked)">
        添加字段
      </button>
      <button type="button" [disabled]="btnDisable" (click)="addObjectField()">
        添加字段-对象
      </button>
      <button type="button" [disabled]="btnDisable" (click)="addArrayField()">
        添加字段-数组
      </button>
    </div>

    <div class="form-content">
      <table border="1">

        <ng-container *ngFor="let key of keys">
          <tr>
            <td>{{key.key}}</td>
            <td>
              <ng-container *ngIf="key.type === 'value'">
                <input type="text" [formControlName]="key.key">
              </ng-container>
              <ng-container *ngIf="key.type === 'group'">
                <ngx-form-object [fg]="key.control"></ngx-form-object>
              </ng-container>
              <ng-container *ngIf="key.type === 'array'">
                <ngx-form-array [fa]="key.control"></ngx-form-array>
              </ng-container>
            </td>
            <td>
              <button type="button" (click)="removeField(key.key)">删除字段</button>
            </td>
          </tr>
        </ng-container>
      </table>
    </div>


  </div>

</div>
